<template>
	<div>
		<HomeHeader></HomeHeader>
		<HomeLeft></HomeLeft>
		<div id="main">
			<!-- <div class="index_con index_con_bg"></div> -->
			<div id="web_con">
				<div class="index_wp">
					<div class="admin_index_tit">
						<h4>数据概览</h4>
					</div>

					<div class="index_data_one">
						<navigator url="/pages/member/index" hover-class="none">
							<div class="item">
								<img src="../../static/images/i1.png" alt="">
								<span>会员总数：</span>
								<b>{{oneinfo.user_count}}</b>
							</div>
						</navigator>
						<navigator url="/pages/shop/index" hover-class="none">
							<div class="item">
								<img src="../../static/images/i2.png" alt="">
								<span>商户总数：</span>
								<b>{{oneinfo.merchant_count}}</b>
							</div>
						</navigator>
						<div class="item">
							<img src="../../static/images/i3.png" alt="">
							<span>会员管理预计收益：</span>
							<!-- <b>{{oneinfo.cumulative_deposit/10000}}</b><span>万</span> -->
							<b>{{oneinfo.merchant_predict/10000}}</b><span>万</span>
						</div>
						<div class="item">
							<img src="../../static/images/i4.png" alt="">
							<span>会员预计收益：</span>
							<b>{{oneinfo.user_predict/10000}}</b><span>万</span>
						</div>
						<div class="item">
							<img src="../../static/images/i5.png" alt="">
							<span>总积分：</span>
							<b>{{oneinfo.total_integral/10000}}</b><span>万</span>
						</div>
					</div>

					<div class="admin_index_tit">
						<h4>会员数据</h4>
					</div>
					<div class="index_data_two">
						<div class="con">
							<navigator url="/pages/member/index?time=0" hover-class="none">
								<div class="item">
									<b style="color: #ff553d;">{{twoinfo.user.today}}</b>
									<span>今日新增会员</span>
								</div>
							</navigator>
							<!-- <div class="xian"></div> -->
							<!-- <div class="item">
								<b style="color: #333;">{{twoinfo.user.yestoday}}</b>
								<span>昨日新增会员</span>
							</div> -->
							<navigator url="/pages/member/index?time=1" hover-class="none">
								<div class="item">
									<b style="color: #333;">{{twoinfo.user.month}}</b>
									<span>本月新增会员</span>
								</div>
							</navigator>							
						</div>
						<div class="con">
							<navigator url="/pages/wealth/index?time=0" hover-class="none">
								<div class="item">
									<b style="color: #646cff;">{{twoinfo.user.todayFee/10000}}万</b>
									<span>今日会员存入金额</span>
								</div>
							</navigator>
							<!-- <div class="xian"></div> -->
							<navigator url="/pages/wealth/index?time=1" hover-class="none">
								<div class="item">
									<b style="color: #333;">{{twoinfo.user.monthFee/10000}}万</b>
									<span>本月会员存入金额</span>
								</div>
							</navigator>
						</div>

						<!-- <div class="con"> -->
							<!-- <div class="item">
								<b style="color: #2db2ce;">{{twoinfo.merchant.month}}</b>
								<span>当月新增商户</span>
							</div>
							<div class="xian"></div>
							<div class="item">
								<b style="color: #333;">{{twoinfo.merchant.last_month}}</b>
								<span>上月新增商户</span>
							</div> -->
						<!-- </div> -->

					</div>

					<div class="admin_index_tit">
						<h4>财务数据</h4>
					</div>

					<div class="index_data_three">
						<div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i6.png" alt="">
									<span>累计存入总额</span>
								</div>
								<div class="p">
									<b>{{threeinfo.total_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i7.png" alt="">
									<span>会员存入总额</span>
								</div>
								<div class="p">
									<b>{{threeinfo.user_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i8.png" alt="">
									<span>商户存入总额</span>
								</div>
								<div class="p">
									<b>{{threeinfo.merchant_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div>
						<!-- <div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i9.png" alt="">
									<span>累计支付收益额</span>
								</div>
								<div class="p">
									<b>{{threeinfo.success_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div> -->
						<div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i10.png" alt="">
									<span>存入额 (进行中)</span>
								</div>
								<div class="p">
									<b>{{threeinfo.success_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div>
						<!-- <div class="item">
							<div class="con">
								<div class="tit">
									<img src="../../static/images/i11.png" alt="">
									<span>存入额（已到期）</span>
								</div>
								<div class="p">
									<b>{{threeinfo.redeem_fee/10000}}</b>
									<em>万</em>
								</div>
							</div>
						</div> -->

					</div>

					<div class="index_data_four">
						<div class="left">
							<div class="admin_index_tit">
								<h4>近六个月用户数据</h4>
							</div>
							<div class="tu">
								<div id="one"></div>
							</div>
						</div>
						<div class="left">
							<div class="admin_index_tit">
								<h4>近六个月财务数据</h4>
							</div>
							<div class="tu">
								<div id="two"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import HomeHeader from '../components/Header.vue'
	import HomeLeft from '../components/Left.vue'
	import * as echarts from 'echarts';
	export default {
		components: {
			HomeHeader,
			HomeLeft,

		},
		data() {
			return {
				oneinfo:{user_count:0,merchant_count:0,merchant_predict:0,user_predict:0,total_integral:0},
				twoinfo:{merchant:{month:0,last_month:0},user:{today:0,yestoday:0,month:0,last_month:0,todayFee:0,monthFee:0}},
				threeinfo:{total_fee:0,user_fee:0,merchant_fee:0,success_fee:0,redeem_fee:0},
				isend:false,
			}
		},
		onLoad() {
			// this.DrwnOne();
		},
		onReady() {
			this.GetOne();
			// this.DrawOne();
			// this.DrawTwo();
		},
		methods: {
			
			
			GetOne:function(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'data/overview', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.oneinfo = res.data;
					that.GetTwo();
				});
			},
			
			GetTwo:function(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'data/user', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.twoinfo = res.data;
					that.GetThee();
				});
			},
			
			GetThee:function(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'data/finance', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.threeinfo = res.data;
					that.GetFour();
					
				});
			},
			
			GetFour:function(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'data/echart', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.isend = true;
					that.DrawOne(res.data.user)
					that.DrawTwo(res.data.finance);
					
				});
			},
			
			DrawOne: function(item) {
				var chartDom = document.getElementById('one');
				var myChart = echarts.init(chartDom);
				var option;
				var app = {};
				const posList = [
					'left',
					'right',
					'top',
					'bottom',
					'inside',
					'insideTop',
					'insideLeft',
					'insideRight',
					'insideBottom',
					'insideTopLeft',
					'insideTopRight',
					'insideBottomLeft',
					'insideBottomRight'
				];
				app.configParameters = {
					rotate: {
						min: -90,
						max: 90
					},
					align: {
						options: {
							left: 'left',
							center: 'center',
							right: 'right'
						}
					},
					verticalAlign: {
						options: {
							top: 'top',
							middle: 'middle',
							bottom: 'bottom'
						}
					},
					position: {
						options: posList.reduce(function(map, pos) {
							map[pos] = pos;
							return map;
						}, {})
					},
					distance: {
						min: 0,
						max: 100
					}
				};
				app.config = {
					rotate: 90,
					align: 'left',
					verticalAlign: 'middle',
					position: 'insideBottom',
					distance: 15,
					onChange: function() {
						const labelOption = {
							rotate: app.config.rotate,
							align: app.config.align,
							verticalAlign: app.config.verticalAlign,
							position: app.config.position,
							distance: app.config.distance
						};
						myChart.setOption({
							series: [{
									label: labelOption
								},
								{
									label: labelOption
								},
								{
									label: labelOption
								},
								{
									label: labelOption
								}
							]
						});
					}
				};
				const labelOption = {
					show: true,
					position: app.config.position,
					distance: app.config.distance,
					align: app.config.align,
					verticalAlign: app.config.verticalAlign,
					rotate: app.config.rotate,
					formatter: '{c}  {name|{a}}',
					fontSize: 12,
					rich: {
						name: {}
					}
				};
				option = {
					grid: {
						left: '1%',
						right: '1%',
						top: '15%',
						bottom: '5%',
						containLabel: true
					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['用户总数', '会员数', '商户数'],
						selectedMode: false,
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: ['1', '2', '3', '4', '5', '6']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '用户总数',
							type: 'bar',
							barGap: 0,
							label: labelOption,
							barWidth: 20,
							itemStyle: {
								// color: '#2a61ff',
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.total
						},
						{
							name: '会员数',
							type: 'bar',
							label: labelOption,
							barWidth: 20,
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.member
						},
						{
							name: '商户数',
							type: 'bar',
							label: labelOption,
							barWidth: 20,
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.merchant
						}
					]
				};
				option && myChart.setOption(option);
			},

			DrawTwo: function(item) {
				var chartDom = document.getElementById('two');
				var myChart = echarts.init(chartDom);
				var option;
				var app = {};
				const posList = [
					'left',
					'right',
					'top',
					'bottom',
					'inside',
					'insideTop',
					'insideLeft',
					'insideRight',
					'insideBottom',
					'insideTopLeft',
					'insideTopRight',
					'insideBottomLeft',
					'insideBottomRight'
				];
				app.configParameters = {
					rotate: {
						min: -90,
						max: 90
					},
					align: {
						options: {
							left: 'left',
							center: 'center',
							right: 'right'
						}
					},
					verticalAlign: {
						options: {
							top: 'top',
							middle: 'middle',
							bottom: 'bottom'
						}
					},
					position: {
						options: posList.reduce(function(map, pos) {
							map[pos] = pos;
							return map;
						}, {})
					},
					distance: {
						min: 0,
						max: 100
					}
				};
				app.config = {
					rotate: 90,
					align: 'left',
					verticalAlign: 'middle',
					position: 'insideBottom',
					distance: 15,
					onChange: function() {
						const labelOption = {
							rotate: app.config.rotate,
							align: app.config.align,
							verticalAlign: app.config.verticalAlign,
							position: app.config.position,
							distance: app.config.distance
						};
						myChart.setOption({
							series: [{
									label: labelOption
								},
								{
									label: labelOption
								},
								{
									label: labelOption
								},
								{
									label: labelOption
								}
							]
						});
					}
				};
				const labelOption = {
					show: true,
					position: app.config.position,
					distance: app.config.distance,
					align: app.config.align,
					verticalAlign: app.config.verticalAlign,
					rotate: app.config.rotate,
					formatter: '{c}  {name|{a}}',
					fontSize: 12,
					rich: {
						name: {}
					}
				};
				option = {
					grid: {
						left: '1%',
						right: '1%',
						top: '15%',
						bottom: '5%',
						containLabel: true
					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['存入总额', '会员存入', '商户存入'],
						selectedMode: false,
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: ['1', '2', '3', '4', '5', '6']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '存入总额',
							type: 'bar',
							barGap: 0,
							label: labelOption,
							barWidth: 20,	
							itemStyle: {
								// color: '#6770ff',
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.totalFee
						},
						{
							name: '会员存入',
							type: 'bar',
							label: labelOption,
							barWidth: 20,
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.memberFee
						},
						{
							name: '商户存入',
							type: 'bar',
							label: labelOption,
							barWidth: 20,
							itemStyle: {
								borderRadius: [20, 20, 0, 0]
							},
							emphasis: {
								focus: 'series'
							},
							data: item.merchantFee
						}
					]
				};
				option && myChart.setOption(option);
			},

		}
	}
</script>

<style>

</style>